import React, { Component } from 'react';
import { Form, Row, Col, Button, Modal, message, Select } from 'antd';
import '../index.css';
import SelectFileForm2 from '../../../components/Modal/select-file-form2';
// import SelectCurveUpForm from '../../Modal/select-curvesUp-form';
import { reqAllMb, reqProcessMbData, reqProcessDocDataList } from '../../../api';
import { connect } from 'react-redux';
import {
  initDaosDataList1, initdocData, initmbData, setCurveType, setCurve1, setCurve2, setColor,
  getDaosMb2, setMbInReducer, setEditDepthData2, getCurvesIntoDao2, setDocInReducer, getDaosMb1, setEditDepthData1, getCurvesIntoDao1, initTwoDimData
} from '../../../redux/actions';
import { removeDocDataList } from '../../../utils/storageUtils';
import './original/set-color.css';
import SetColor from './original/set-color';



import { DaosListDemo2 } from '../../../config/daosList';
const docDatasList1 = DaosListDemo2;
const docDatasList2 = JSON.parse(JSON.stringify(DaosListDemo2));

const { Option } = Select;


class TwodimshowSider extends Component {

  state = {
    docInfo: '',
    visible: '0',
    mb_id: '',  // 选中模板id
    mbList: [],   // 所有模板列表
    curves_mb: [],  // 获取模板内容
    curve_list: [],  //文件内所有曲线名称

    curveType1: '横切切面',
    docId: '',   // 存储文件id
    colorBoxNums: '5',
    background1: 'red',
    background2: 'orange',
    background3: 'yellow',
    background4: 'green',
    background5: 'blue',

  };

  getAllMb = async () => {
    const result = await reqAllMb();
    //console.log("mb11",result);
    if (result.code === 200) {
      const mbList = result.data;
      this.setState({
        mbList
      })
    }
  }

  getMb = (values) => {  // 选择模板进行state保存

    this.setState({
      mb_id: values
    })
  }
  getCurveList1 = (values) => {
    this.props.setCurve1(values);

  }
  getCurveList2 = (values) => {
    this.props.setCurve2(values);
  }


  handleMb = async () => {    // 添加模板 响应函数     
    this.setState({ visible: '0' });
    const mb_id = this.formRef.current.getFieldValue('mb_id');
    const result = await reqProcessMbData(mb_id);
    console.log("获取模板", result)
    if (result.code === 200) {
      const curves_mb = result.data;
      this.setState({
        curves_mb
      })
      this.props.getDaosMb1(curves_mb);   // 将道模板先加载到页面中
      this.props.setMbInReducer(result.data);  // 保存当前模板(完整的) :  result.data
      this.props.isUpdatePages(!this.props.updatePages);  // 及时更新页面(导入模板页面)
    } else {
      message.error("模板获取失败！");
    }
  };

  handleMb = async () => {    // 添加模板 响应函数  
    this.setState({ visible: '0' });
    const mb_id = this.state.mb_id;
    const result = await reqProcessMbData(mb_id);
    console.log("获取模板", result);
    if (result.code === 200) {
      const curves_mb = result.data;
      this.setState({ curves_mb }, () => console.log("模板名称：", mb_id, curves_mb))
      this.props.getDaosMb1(curves_mb);   // 将道模板先加载到页面中
      this.props.setMbInReducer(result.data);  // 保存当前模板(完整的) :  result.data
    } else {
      message.error("模板获取失败！");
    }
  };

  openFileShow1 = () => {    // 选择文件弹框显示
    this.setState({
      visible: '1'
    });
  };
  handleChange = (value) => {  // 修改横切、纵切面选项
    this.setState({ curveType1: value });
  }
  handleOpenFile = async () => {    // 添加数据文件 响应函数      
    this.setState({ visible: '0' });
    var docInfo;
    const doc_id = this.formRef.current.getFieldValue('doc_id');
    this.docList.map((item) => {
      if (item.doc_id === doc_id) {
        docInfo = item
      }
    });
    // console.log("docInfo",docInfo)
    this.setState({
      docInfo
    });
    const doc_type = docInfo.doc_type;
    const drill_id = docInfo.drill_id;
    const org_id = docInfo.org_id;
    const ws_id = docInfo.ws_id;
    //console.log("选择文件成功",doc_id,docInfo);
    if (doc_type === "纯数据文件") {
      const result = await reqProcessDocDataList(doc_id, doc_type, drill_id, org_id, ws_id);  // 根据文件id获取 数据文件
      //console.log("获取纯数据文件result：",result);
      if (result.code === 200) {
        removeDocDataList();
        this.props.initTwoDimData()

        const docDatasList = result.data;
        if (docDatasList.rock_curve) {
          docDatasList.curves.push(docDatasList.rock_curve);    // 将岩性曲线 推入 曲线数组中
        }
        console.log("所有的曲线1：", docDatasList.curves);
        let curveArr = new Array();
        docDatasList.curves.map((item) => {
          if (item.curve_name !== '岩性') { curveArr.push(item); }
        })
        this.setState({
          curve_list: curveArr
        })

        this.props.setDocInReducer(docDatasList);  // 将文件保存到reducer  vvvvvvvv
        // console.log(docDatasList)
        // const checkOnLeaf = {key: docInfo.doc_id, title: docInfo.title, type: docDatasList.doc_type, curves: docDatasList.curves};
        // const docStartDepth = docDatasList.start_depth;  //文件起深
        // const docEndDepth = docDatasList.end_depth;      // 文件终深
        // const docInterval = docDatasList.interval;       // 深度间隔
        // this.props.setEditDepthData1(Number(docStartDepth),Number(docEndDepth),Number(docInterval));   // 读取文件的 起深、终深、深度间隔，并更新
        // if(checkOnLeaf.curves){
        //   if(this.state.curves_mb.length != 0){  // 用户在选择文件之前已经导入模板
        //     const data = checkOnLeaf.curves;
        //     this.props.getCurvesIntoDao1(data);  // 将 纯数据曲线 传入模板中  vvvvvvvvv
        //     this.props.setDocInReducer(docDatasList);  // 将文件保存到reducer  vvvvvvvv
        //     //this.props.isUpdatePages(!this.props.updatePages);  // 及时更新页面(导入模板页面)
        //     setDocDataList(docDatasList);  // 将获取到的 文件数据 放入内存  
        //   }else{  // 用户没有选择模板
        //     if(this.props.defaultmbData.mb_id){  // 有默认模板,则自动导入默认模板
        //       const mbData = this.props.defaultmbData;
        //       const data = checkOnLeaf.curves;
        //       this.props.getDaosMb1(mbData);   // 将 默认模板 载入
        //       this.props.getCurvesIntoDao1(data);  // 将 纯数据曲线 传入模板中  vvvvvvvvv
        //       this.props.setDocInReducer(docDatasList);  // 将文件保存到reducer  vvvvvvvv
        //       this.props.setMbInReducer(mbData);  // 保存当前模板(完整的)
        //       //this.props.isUpdatePages(!this.props.updatePages);  // 及时更新页面(导入模板页面)
        //       setDocDataList(docDatasList);  // 将获取到的 文件数据 放入内存
        //     }else{
        //       message.error("请先选择模板或设置默认模板！");
        //     }
        //   }
        // }
      } else {
        message.error("数据获取异常！");
      }
    } else if (docInfo.doc_type === "绘图文件") {   //  绘图文件暂时还没有接
      const result = await reqProcessDocDataList(doc_id, doc_type, drill_id, org_id, ws_id);  // 根据文件id获取 绘图文件
      console.log("绘图文件", result)
      if (result.code === 200) {
        const docDatasList = result.data;
        let curveArr = new Array();
        docDatasList.docData.curves.map((item) => {
          if (item.curve_name !== '岩性') { curveArr.push(item); }
        })
        this.setState({
          curve_list: curveArr
        })

        this.props.setDocInReducer(docDatasList);  // 将文件保存到reducer  vvvvvvvv
        // docDatasList.docData.curves.push(docDatasList.docData.rock_curve);   // 将岩性曲线 放入 曲线数组中
        // const checkOnLeaf = {key: docInfo.doc_id, title: docInfo.title, type: docDatasList.doc_type, curves: docDatasList.docData.curves};
        // const docStartDepth = docDatasList.docData.start_depth;  //文件起深
        // const docEndDepth = docDatasList.docData.end_depth;      // 文件终深
        // const docInterval = docDatasList.docData.interval;       // 深度间隔
        // this.props.setEditDepthData1(Number(docStartDepth),Number(docEndDepth),Number(docInterval));   // 读取文件的 起深、终深、深度间隔，并更新
        // if(checkOnLeaf.curves){
        //   if(this.state.curves_mb.length === 0){  // 没有导入模板     
        //     //1、导入模板mbData
        //     const mbData = docDatasList.mbData;
        //     this.props.getDaosMb1(mbData);   // 将 绘图文件 的 模板部分 先载入
        //     //2、导入数据docData
        //     const docData = docDatasList.docData;
        //     this.props.getCurvesIntoDao1(docData.curves);    // 将 绘图文件 的 纯数据部分 载入  vvvvvvvv
        //     this.props.setDocInReducer(docDatasList);  // 将绘图文件保存到reducer  vvvvvvvvvvvv
        //     this.props.setMbInReducer(mbData);  // 保存当前模板(完整的)
        //     //this.props.isUpdatePages(!this.props.updatePages);  // 及时更新页面(导入模板页面)
        //     setDocDataList(docDatasList);  // 将获取到的 绘图文件数据 放入内存
        //     //console.log("绘图文件",mbData,docData)
        //   }else{
        //     message.error("请勿导入模板！");
        //   }
        // }
      } else {
        message.error("数据获取异常！");
      }
    }
    this.props.setCurveType(this.state.curveType1);
  };
  openColorBox = () => {
    this.setState({ visible: '2' });
  }
  handleValue = (value) => {
    this.setState({
      colorBoxNums: value
    })
  }
  handleSetColor = (event) => {   // 编辑颜色 响应函数
    console.log("okoko", this.color1, this.color2, this.color3, this.color4, this.color5,)
    console.log('我是从孩子那里传过来的VALUE', this.state.colorBoxNums);
    this.setState({
      visible: '0',
    })
    const background1 = this.color1 ? this.color1 : this.state.background1;
    const background2 = this.color2 ? this.color2 : this.state.background2;
    const background3 = this.color3 ? this.color3 : this.state.background3;
    const background4 = this.color4 ? this.color4 : this.state.background4;
    const background5 = this.color5 ? this.color5 : this.state.background5;
    //对visualMap颜色赋值
    let color1;
    let color11;
    let color2;
    if (this.state.colorBoxNums === '2') {
      color1 = background1;
      color2 = background2;
      color11 = background1;
      this.props.setColor([color1, color11, color2]);
    } else if (this.state.colorBoxNums === '3') {
      color1 = [background1, background2];
      [...color11] = color1;
      color11.reverse();
      color2 = background3;
      this.props.setColor([color1, color11, color2]);
    } else if (this.state.colorBoxNums === '4') {
      color1 = [background1, background2, background3];
      [...color11] = color1;
      color11.reverse();
      color2 = background4;
      this.props.setColor([color1, color11, color2]);
    } else {
      color1 = [background1, background2, background3, background4];
      [...color11] = color1;
      color11.reverse();
      color2 = background5;
      this.props.setColor([color1, color11, color2]);
    }

  };

  handleCancel = () => {    // 对话框取消按钮
    this.setState({
      visible: '0'
    });
  };

  componentWillMount() {
    this.getAllMb();
  }

  formRef1 = React.createRef();
  formRef3 = React.createRef();
  formRef4 = React.createRef();

  componentWillUpdate(nextProps) {
    if (this.props.isDoNull != nextProps.isDoNull) {   // 清空
      // this.formRef1.current.resetFields();
      this.formRef3.current.resetFields();
      this.formRef4.current.resetFields();
      document.getElementById('input1').innerHTML = ' ';
    }
  }

  render() {
    const { visible, docInfo, mbList, curve_list, background1, background2, background3, background4, background5, color1, color11, color2, curveType } = this.state;
    return (
      <div className='data-comparison-sider-wrapper'>
        {/* <Row>
          
          <Col>模&nbsp;&nbsp;&nbsp;&nbsp;版：</Col>
          <Col span={12}>
            <Form ref={this.formRef1}  >
              <Form.Item 
                name='mb' 
              >
                <Select 
                  style={{ width: 127 }} 
                  placeholder="请选择" 
                  getPopupContainer={triggerNode => triggerNode.parentNode}
                  onSelect={this.getMb}
                >  
                  {mbList.map((item) => <Option value={item.mb_id}>{item.mb_name}</Option>)}
                </Select>
              </Form.Item> 
            </Form>
          </Col>
          <Col>
            <Form.Item>
              <Button className="data-pre-process-button"  type="primary" onClick={this.handleMb}>
                确定
              </Button>
            </Form.Item>
          </Col>
        </Row> */}
        <Row>
          <Col style={{ width: 70, lineHeight: '32px' }}>文&nbsp;&nbsp;&nbsp;件&nbsp;：</Col>
          <Col>
            {/* <Form ref={this.formRef2} >
              <Form.Item 
                name='file1' 
              >
                {console.log("文件",docInfo.title)}
                <Input className="data-pre-process-input" id="input1" value={docInfo.title} style={{width:'112px',height:'28px'}}  readonly/>
              </Form.Item> 
            </Form> */}
            <div className="data-pre-process-input" id="input1" >{docInfo ? docInfo.title.substr(0, 14) : ''}</div>
          </Col>
          <Col>
            <Form.Item>
              <Button className="data-pre-process-button" type="primary" onClick={this.openFileShow1}>
                选择
              </Button>
            </Form.Item>
          </Col>
        </Row>
        <Row>
          <Col style={{ width: 70, lineHeight: '32px' }}>上&nbsp;曲&nbsp;线&nbsp;：</Col>
          <Col>
            <Form ref={this.formRef3}  >
              <Form.Item
                name='mb'
              >
                <Select
                  style={{ width: 186 }}
                  placeholder="请选择"
                  getPopupContainer={triggerNode => triggerNode.parentNode}
                  onSelect={this.getCurveList1}
                >
                  {curve_list.map((item) => <Option value={item.curve_id}>{item.curve_name}</Option>)}
                </Select>
              </Form.Item>
            </Form>
          </Col>

        </Row>
        <Row>
          <Col style={{ width: 70, lineHeight: '32px',textAlign:'right' }}>下&nbsp;曲&nbsp;线&nbsp;：</Col>
          <Col>
            <Form ref={this.formRef4}  >
              <Form.Item
                name='mb'
              >
                <Select
                  style={{ width: 186 }}
                  placeholder="请选择"
                  getPopupContainer={triggerNode => triggerNode.parentNode}
                  onSelect={this.getCurveList2}
                >
                  {curve_list.map((item) => <Option value={item.curve_id}>{item.curve_name}</Option>)}
                </Select>
              </Form.Item>
            </Form>
          </Col>
        </Row>
        {/* <Row>
          
          <Col>调色板：</Col>
          <Col>
            <Form.Item>
              <Button className="data-pre-process-button"  type="primary" onClick={this.openColorBox}>
                选择
              </Button>
            </Form.Item>
          </Col>
        </Row> */}






        <Modal
          title="选择数据文件"
          visible={visible === '1'}
          onOk={this.handleOpenFile}
          onCancel={this.handleCancel}
          destroyOnClose={true}  // 关闭时销毁子元素
          okText="确定"
          cancelText="取消"
        >
          <SelectFileForm2
            setForm={(formRef) => { this.formRef = formRef }}
            setDocList={(docList) => { this.docList = docList }}
          />

          <Form
            name="control-ref"
            onFinish={this.onFinish}
          >
            <Form.Item
              name="doc_curveType"
              label="选择井轨切面"
              rules={[{ required: true }]}
            >
              <Select
                defaultValue="横切切面"
                style={{ width: '363px', color: 'rgba(0, 0, 0, 0.65)' }}
                onChange={this.handleChange}
              >
                <Select value="横切切面">横切切面-左右偏差</Select>
                <Select value="纵切切面">纵切切面-上下偏差</Select>
              </Select>
            </Form.Item>
          </Form>
        </Modal>
        <Modal
          title="定制色带颜色(从高至低)"
          visible={visible === '2'}
          onOk={this.handleSetColor}
          onCancel={this.handleCancel}
          okText="确定"
          cancelText="取消"
          destroyOnClose={true}
        >
          <SetColor
            background1={background1}
            background2={background2}
            background3={background3}
            background4={background4}
            background5={background5}
            setColor1={(color) => { this.color1 = color }}
            setColor2={(color) => { this.color2 = color }}
            setColor3={(color) => { this.color3 = color }}
            setColor4={(color) => { this.color4 = color }}
            setColor5={(color) => { this.color5 = color }}
            setNums={this.handleValue}
          />
        </Modal>

        {/* </Form> */}

      </div>
    );
  }
}

export default connect(
  state => ({ twoDimData: state.twoDimData, selectedCurves2: state.selectedCurves2, docData: state.docData, updatePages: state.updatePages, daosDataList1: state.daosDataList1, selectedCurveShow1: state.selectedCurveShow1, defaultmbData: state.defaultmbData, isDoNull: state.isDoNull }),
  { initDaosDataList1, initdocData, initmbData, setCurveType, setCurve1, setCurve2, setColor, getDaosMb2, setMbInReducer, setEditDepthData2, getCurvesIntoDao2, setDocInReducer, getDaosMb1, setEditDepthData1, getCurvesIntoDao1, initTwoDimData }    //replaceNewCurves,isUpdatePages,
)(TwodimshowSider);













